<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<style>
  [v-cloak] {
    display: none;
  }
</style>

<body>
  <div id="app" v-cloak>
    <div class="wray" style='max-width: 600px;margin: 20px auto;'>
      <div class="row">
        <div class="col-md-10 col-sm-10">
          <input type="text" v-model='inputTxt' class="form-control">
        </div>
        <div class="col-md-2 col-sm-2">
          <button @click='addTodo' class="btn btn-primary">增加</button>
        </div>
      </div>
      <div class="content" style="margin-top: 10px">
        <ul class="list-group">
          <li v-if='!todos.length' class="text-center list-group-item">暂无代办事项</li>
          <li v-for='(todo,index) in todos' :key='index' class="list-group-item">
            {{ todo.content }}
            <button style="float: right;" @click='delTodo(index)' class='btn btn-danger btn-xs'>删除</button>
            <button @click='changeState(index)' style="float:right;margin-right:5px" :disabled='todo.isCompleted'
              class="btn btn-success btn-xs">{{ todo.isCompleted?'已完成':'点击完成' }}</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      inputTxt: '',
      todos: [
        {
          content: '干饭',
          isCompleted: true
        },
        {
          content: '睡觉',
          isCompleted: false
        }
      ]
    },
    methods: {
      delTodo(index) {
        if (confirm('确定删除吗？')) {
          this.todos.splice(index, 1)
        }
      },
      addTodo() {
        if (this.inputTxt.trim() === '') {
          return
        }
        this.todos.push({
          content: this.inputTxt,
          isCompleted: false
        })
        this.inputTxt = '';
      },
      changeState(index) {
        this.todos[index].isCompleted = true;
      }
    }
  })
</script>

</html>